<template>
  <el-dialog v-model="dialogVisible" :title="props.title" top="48px" :width="width">
    <DialogTable
      ref="proTable"
      title="菜单列表"
      row-key="_id"
      :init-param="props.initParam"
      :pagination="false"
      :columns="props.columns"
      :tool-button="false"
      :highlight-current-row="true"
      :request-api="props.requestApi"
      :data="props.data"
      :expand-all="props.expandAll"
      max-height="450px"
      :search-col="searchCol"
    >
      <!-- 菜单图标 -->
      <template #icon="scope">
        <el-icon :size="18">
          <component :is="scope.row.meta.icon"></component>
        </el-icon>
      </template>
    </DialogTable>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false" :icon="Close"> 取消 </el-button>
        <el-button type="primary" :disabled="proTable && !proTable.isSelected" @click="selectOrg" :icon="Finished">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="SelectIcon">
import { ref } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import DialogTable from "@/components/ProTable/dialog.vue";
import { Close, Finished } from "@element-plus/icons-vue";

const proTable = ref<InstanceType<typeof DialogTable> | null>(null);

export interface SelectProps {
  columns: ColumnProps[];
  title: string;
  width: string;
  searchCol: any;
  expandAll?: boolean;
  initParam?: any;
  data?: any[];
  requestApi?: (params: any) => Promise<any>;
}

let props = withDefaults(defineProps<SelectProps>(), {
  width: "66%",
  searchCol: { xs: 1, sm: 1, md: 2, lg: 3, xl: 3 },
  columns: () => [],
  title: "请选择",
  initParam: {},
  expandAll: true
});

// open Dialog
const dialogVisible = ref(false);

// 选择图标(触发更新父组件数据)
const emit = defineEmits<{
  change: [value: { [key: string]: any }[] | undefined];
}>();
const selectOrg = () => {
  dialogVisible.value = false;
  emit("change", proTable.value?.selectedList);
};

// 接收父组件传过来的参数
const openDialog = () => {
  proTable.value?.element?.clearSelection();
  dialogVisible.value = true;
};

defineExpose({
  openDialog
});
</script>

<style scoped lang="scss"></style>
